<template>
    <div
        class="absolute w-full h-full top-0 left-0 flex justify-center items-center bg-[rgba(0,0,0,0.4)] backdrop-blur-sm select-none">
        <div class="w-[50rem] h-[40rem] opacity-9 box rounded-md relative">
            <!-- 顶部邮箱导航栏 -->
            <div
                class="w-full h-16 rounded-tl-md rounded-tr-md z-50 bg-[rgba(0,0,0,0.5)] flex items-center justify-between px-5">
                <div class="flex items-center">
                    <svg t="1724253169345" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="48198" width="40" height="40">
                        <path
                            d="M831.7 839.4H192.3c-37.3 0-67.5-30.2-67.5-67.5v-337c0-36.1 18.1-69.7 48.2-89.6l301.8-199c22.5-14.9 51.8-14.9 74.3 0l301.8 199c30.1 19.9 48.2 53.5 48.2 89.6v337c0.1 37.3-30.2 67.5-67.4 67.5z"
                            fill="#FFA820" p-id="48199"></path>
                        <path
                            d="M622.3 194.6l-73.2-48.3c-6-4-12.5-6.9-19.3-8.8-6.6-0.3-13.2-0.4-19.8-0.4-5.1 0-10.2 0.1-15.3 0.3-7 1.8-13.7 4.8-19.9 8.9l-48.4 31.9c21.7-3.8 44-5.7 66.7-5.7 45.3 0 88.8 7.8 129.2 22.1zM124.8 434.9v4.3c10.6-32.3 25.3-62.7 43.5-90.6-27.3 20.2-43.5 52.2-43.5 86.3zM124.8 680.8v91.1c0 37.3 30.2 67.5 67.5 67.5h32.3c-45.2-43.4-79.8-97.7-99.8-158.6zM899.1 771.9v-337c0-36.1-18.1-69.7-48.2-89.6L777.7 297c63.9 69.1 102.9 161.5 102.9 263 0 109.8-45.7 208.9-119 279.4h70.1c18.4 0 35.1-7.4 47.2-19.3 6.1-9.4 11.9-19 17.4-28.8a68.4 68.4 0 0 0 2.8-19.4z"
                            fill="#FEB133" p-id="48200"></path>
                        <path
                            d="M142.6 541.8c0-101.1 45-191.7 116-252.9L173 345.3c-1.6 1.1-3.2 2.2-4.7 3.3-18.2 27.9-32.9 58.3-43.5 90.6v241.6c20 60.9 54.6 115.2 99.8 158.6h100.5c-108.3-55.1-182.5-167.7-182.5-297.6zM880.6 560c0-101.5-39-193.9-102.9-263L622.3 194.6c-40.4-14.3-83.9-22.1-129.2-22.1-22.8 0-45 2-66.7 5.7l-96.2 63.4c44.2-21.6 93.8-33.7 146.2-33.7 184.4 0 333.8 149.4 333.8 333.8 0 129.9-74.2 242.4-182.5 297.6h133.9c73.3-70.4 119-169.5 119-279.3z"
                            fill="#FEB533" p-id="48201"></path>
                        <path
                            d="M810.2 541.8c0-184.4-149.4-333.8-333.8-333.8-52.5 0-102.1 12.1-146.2 33.7l-71.6 47.2c-71 61.2-116 151.8-116 252.9 0 129.9 74.2 242.4 182.5 297.6h302.6C736 784.3 810.2 671.7 810.2 541.8zM459.5 803.6c-154.6 0-280-125.4-280-280s125.4-280 280-280 280 125.4 280 280-125.4 280-280 280z"
                            fill="#FEBA33" p-id="48202"></path>
                        <path
                            d="M459.5 243.6c-154.6 0-280 125.4-280 280s125.4 280 280 280 280-125.4 280-280-125.4-280-280-280z m-16.8 488.2c-125 0-226.4-101.4-226.4-226.4S317.7 279 442.7 279s226.4 101.4 226.4 226.4-101.4 226.4-226.4 226.4z"
                            fill="#FFBE34" p-id="48203"></path>
                        <path
                            d="M442.7 279c-125 0-226.4 101.4-226.4 226.4s101.4 226.4 226.4 226.4 226.4-101.4 226.4-226.4S567.7 279 442.7 279z m-16.8 380.8c-95.3 0-172.6-77.3-172.6-172.6s77.3-172.6 172.6-172.6 172.6 77.3 172.6 172.6-77.3 172.6-172.6 172.6z"
                            fill="#FFC234" p-id="48204"></path>
                        <path
                            d="M425.9 314.6c-95.3 0-172.6 77.3-172.6 172.6s77.3 172.6 172.6 172.6 172.6-77.3 172.6-172.6-77.3-172.6-172.6-172.6z m-16.8 273.2c-65.7 0-118.9-53.2-118.9-118.9S343.4 350 409.1 350 528 403.3 528 468.9s-53.2 118.9-118.9 118.9z"
                            fill="#FFC734" p-id="48205"></path>
                        <path
                            d="M324.997308 552.986059a118.9 118.9 0 1 0 168.147057-168.152928 118.9 118.9 0 1 0-168.147057 168.152928Z"
                            fill="#FFCB34" p-id="48206"></path>
                        <path
                            d="M831.7 848.4H192.3c-42.2 0-76.5-34.3-76.5-76.5v-337c0-39.2 19.5-75.5 52.2-97.1l301.8-199c25.6-16.9 58.6-16.9 84.2 0l301.8 199c32.7 21.6 52.2 57.9 52.2 97.1v337c0.1 20.4-7.9 39.6-22.3 54-14.3 14.6-33.5 22.5-54 22.5zM511.9 144.1c-11.2 0-22.4 3.2-32.2 9.7L178 352.8c-27.6 18.3-44.2 49-44.2 82.1v337c0 32.3 26.2 58.5 58.5 58.5h639.4c15.6 0 30.3-6.1 41.4-17.2 11-11 17.1-25.7 17-41.3v-337c0-33.1-16.5-63.8-44.2-82.1l-301.8-199c-9.7-6.4-20.9-9.7-32.2-9.7z"
                            fill="#FFA820" p-id="48207"></path>
                        <path
                            d="M473.2 615L191.3 425.5c-12.1-8.1-6.3-27 8.2-27h624.9c14.6 0 20.3 18.9 8.2 27L550.8 615a69.813 69.813 0 0 1-77.6 0z"
                            fill="#FFE3B4" p-id="48208"></path>
                        <path
                            d="M166.8 481.8v124.1c0 9.9 8.1 18 18 18s18-8.1 18-18V481.8c0-9.9-8.1-18-18-18s-18 8.1-18 18zM166.8 665.9v10.5c0 9.9 8.1 18 18 18s18-8.1 18-18v-10.5c0-9.9-8.1-18-18-18s-18 8-18 18z"
                            fill="#FFFFFF" p-id="48209"></path>
                    </svg>
                    <span class="ml-2 text-orange-300">邮箱</span>
                </div>
                <div class="flex items-center">
                    <span class="text-orange-300">邮件数</span>
                    <span class="text-white ml-5 mr-16">{{ mailList.length }} / 100</span>
                    <button @click="emit(`showName`)"
                        class="flex h-8 w-8 z-50 items-center justify-center rounded-full bg-orange-300 text-white hover:scale-110 transition-all shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000]">
                        <svg t="1724252642050" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="43079" width="20" height="20">
                            <path
                                d="M773.41 196.21c15.05-15.01 39.41-14.98 54.42 0.07 14.07 14.11 15.05 36.63 2.24 51.9l-2.25 2.44-577.2 577.2c-15.05 15.01-39.41 14.98-54.42-0.07-14.07-14.11-15.05-36.63-2.24-51.9l2.25-2.44 577.2-577.2z"
                                p-id="43080" fill="#ffffff"></path>
                            <path
                                d="M196.21 196.21c14.12-14.12 36.68-15.09 51.97-2.25l2.44 2.25 577.2 577.2c15.01 15.05 14.98 39.41-0.07 54.42-14.11 14.07-36.63 15.05-51.9 2.24l-2.44-2.25-577.2-577.2c-15.03-15.03-15.03-39.39 0-54.41z"
                                p-id="43081" fill="#ffffff"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <!-- 邮件列表 -->
            <div class="w-full h-fit p-2 rounded-b-md z-50">
                <div class="flex justify-between">
                    <!-- 左侧 -->
                    <ul class="w-3/4 h-[30rem] overflow-auto scrollable flex flex-col gap-2">
                        <li v-for="(item, index) in mailList" :key="item.id" @click="clickMail(item, index)"
                            :class="index == listIndex ? `bg-black/30 border-2 border-orange-400` : `bg-[rgba(0,0,0,0.7)] border-transparent`"
                            class="w-full p-2 rounded-sm hover:bg-black/30 transition-all flex relative border-2">
                            <img src="../assets/imgs/avatar.jpg" class="w-12 h-12 rounded-sm" alt="">
                            <div class="w-full pl-2">
                                <p class="text-white font-bold text-sm mb-2">{{ item.title }}</p>
                                <div class="flex items-center">
                                    <svg t="1724258045727" class="icon mr-1" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2429" width="15" height="15">
                                        <path
                                            d="M900.83328 747.55072c0-61.29664-72.08448-136.78592-129.408-145.3056l77.75744-128.27648h-179.92704c32.35328-46.5408 53.92384-107.84768 53.92384-175.95904v-15.89248c69.81632-12.48768 115.22048-32.35328 115.22048-52.21888 0-21.56544-50.51392-41.43616-127.70816-53.92384-3.4048-18.16576-55.62368-165.1712-116.92032-165.1712-27.24352 0-48.8192 14.18752-63.00672 35.75808 0 10.78784-10.78272 21.56544-24.97536 21.56544-12.48768 0-23.2704-9.08288-24.97024-19.8656C468.32128 26.7008 445.05088 10.24 417.80736 10.24 358.21056 10.24 302.58688 145.32608 290.0992 179.38432c-66.4064 12.48768-109.54752 30.64832-109.54752 52.21888 0 21.56544 44.84096 39.72608 115.2256 52.21888v15.89248c0 68.11136 19.8656 129.41312 53.92384 175.95904H169.76896l77.19424 126.00832c-57.32864 0-132.82304 78.8992-132.82304 147.57376l1.70496 206.60736c0 34.05824 26.6752 61.30176 61.30176 61.30176h664.65792a61.04576 61.04576 0 0 0 61.30176-61.30176l-2.27328-208.31232zM460.94336 966.64576h-28.94848l-53.92384-397.32224 112.95744 98.75968-30.08512 298.56256z m123.74016 0h-28.94848l-30.65344-298.56256 113.52064-100.46464-53.91872 399.0272z m68.11136-627.2v12.48768h-14.18752s-9.08288 77.19424-57.32864 77.19424c-48.81408 0-57.89184-77.19424-57.89184-77.19424h-32.34816c-7.37792 63.0016-39.7312 77.19424-57.32864 77.19424-43.136 0-55.6288-57.32864-57.32864-77.19424H361.6256V326.9632h107.84256v12.48768h72.0896V326.9632h107.84256v12.48768h3.39456z m0 0"
                                            fill="#e6e6e6" p-id="2430"></path>
                                    </svg>
                                    <span class="text-sm text-white">{{ item.senderName }}</span>
                                </div>
                            </div>
                            <svg v-show="item.mailStatus == 1" t="1726394955120" class="absolute top-0 right-0 w-8"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17209">
                                <path
                                    d="M833.536 965.632l-321.536-191.488-319.488 189.44-1.024-835.584q0-26.624 10.24-49.664t27.648-40.448 40.96-27.648 50.176-10.24l384 0q26.624 0 49.664 10.24t40.448 27.648 27.648 40.448 10.24 49.664z"
                                    fill="#1afa29" p-id="17210"></path>
                            </svg>
                        </li>
                    </ul>
                    <!-- 右侧 -->
                    <div class="w-full h-[30rem] flex flex-col text-white">
                        <p class="text-center font-bold text-lg font-mono">{{ mailDetail.title }}</p>
                        <img src="../assets/imgs/line.png" class="-mt-52" alt="">
                        <div class="w-[90%] mx-auto h-fit -mt-52">
                            <p class="font-serif font-bold">发件人：{{ mailDetail.senderName }}</p>
                            <p class="font-serif pb-2">时间：{{ formatter(mailDetail.createdAt) }}</p>
                            <p class="font-serif font-black indent-8 h-64 overflow-auto scrollable p-1 rounded-md">
                                {{ mailDetail.content }}
                            </p>
                        </div>
                        <swiper class="w-[25rem] mt-6 bg-black/10" :modules="modules" :slides-per-view="4"
                            :space-between="0">
                            <swiper-slide v-for="item in mailDetail.prizes" :key="item.id">
                                <div class="flex flex-col items-center justify-center relative">
                                    <img :src="`/api` + item.img" :class="goodsWorth(item.worth)"
                                        class="w-16 h-16 rounded-lg border-2 border-white p-1">
                                    <span class="font-black font-mono">X{{ item.num }}</span>
                                    <div class="w-fit absolute top-0 left-[1.15rem] bg-black/50 rounded-lg"
                                        v-show="mailList[listIndex].mailStatus == 1">
                                        <svg t="1726327205590" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="10591" width="64" height="64">
                                            <path
                                                d="M512 1005.7216A493.7216 493.7216 0 1 1 512 18.2784a493.7216 493.7216 0 0 1 0 987.4432z m0-65.8432a427.8784 427.8784 0 1 0 0-855.7568 427.8784 427.8784 0 0 0 0 855.7568z m-46.4896-324.864l256-256a32.9216 32.9216 0 0 1 46.592 46.592l-279.3472 279.2448a32.9216 32.9216 0 0 1-46.5408 0L297.984 540.5696a32.9216 32.9216 0 1 1 46.5408-46.592l121.0368 121.0368z"
                                                fill="#12BB7C" p-id="10592"></path>
                                        </svg>
                                    </div>
                                </div>
                            </swiper-slide>
                        </swiper>
                    </div>
                </div>
                <!-- 底部按钮 -->
                <div class="w-full p-2 h-20 flex items-center">
                    <div class="flex justify-between">
                        <!-- 领取 -->
                        <button
                            class="w-28 h-10 ml-7 cursor-pointer opacity-90 hover:opacity-100 hover:scale-110 transition-all p-[2px] bg-orange-400 backdrop-blur-lg rounded-lg active:scale-95 flex items-center">
                            <svg t="1724316106402" class="icon mx-1" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3832" width="25" height="25">
                                <path
                                    d="M309.1 318.6c15.6-3.9 25.1-19.7 21.2-35.2-2.9-11.5-4.3-23.4-4.3-35.3 0-80.1 65.2-145.3 145.3-145.3 80.1 0 145.3 65.2 145.3 145.3 0 16.9-2.8 33.3-8.5 49-5.4 15.1 2.4 31.8 17.5 37.2 3.2 1.2 6.6 1.7 9.8 1.7 11.9 0 23.1-7.4 27.4-19.2 7.9-22 11.9-45 11.9-68.6 0-112.2-91.3-203.4-203.4-203.4S267.9 135.9 267.9 248c0 16.7 2 33.3 6 49.3 3.9 15.6 19.6 25 35.2 21.3z"
                                    p-id="3833" fill="#1296db"></path>
                                <path
                                    d="M777.9 472.3l-197.6-24.7v-156c0-56.1-45.6-101.7-101.7-101.7s-101.7 45.6-101.7 101.7v285.7l-31.3-48.2c-30.6-47-93.7-60.4-140.7-29.8-47 30.6-60.4 93.7-29.9 140.7l187.4 288.3c19.4 29.9 52.2 47.1 87.3 45.8 1.6 0.3 3.3 0.4 4.7 0.4h339c42.7 0 77.5-34.8 77.5-77.5V577.7c0-53.5-40-98.8-93-105.4z m34.9 424.8c0 10.7-8.7 19.4-19.4 19.4H457.1c-2.3-0.4-4.5-0.6-6.6-0.4-15.8 0.8-30.9-6.5-39.3-19.4L223.7 608.4c-13.1-20.1-7.4-47.2 12.8-60.3 20.1-13 47.2-7.4 60.3 12.8l84.7 130.3c7 10.8 20.3 15.5 32.6 12 12.3-3.7 20.8-15 20.8-27.9V291.6c0-24 19.5-43.6 43.6-43.6 24 0 43.6 19.6 43.6 43.6v181.6c0 14.6 10.9 27 25.5 28.8l223 27.9c24.1 3 42.2 23.5 42.2 47.7v319.5z"
                                    p-id="3834" fill="#1296db"></path>
                            </svg>
                            <span class="text-white font-bold font-serif">全部领取</span>
                        </button>
                        <!-- 删除 -->
                        <button
                            class="w-28 h-10 ml-10 cursor-pointer opacity-90 hover:opacity-100 hover:scale-110 transition-all p-[2px] bg-orange-400 backdrop-blur-lg rounded-lg active:scale-95 flex items-center">
                            <svg t="1724317227315" class="icon mx-1" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5029" width="23" height="23">
                                <path
                                    d="M566 332H458c-69.5 0-126-57.7-126-128.6v-30.9C332 101.7 388.5 44 458 44h108c69.5 0 126 57.7 126 128.6v30.9c0 70.8-56.5 128.5-126 128.5z m54-159.4c0-31.2-24.2-56.6-54-56.6H458c-29.8 0-54 25.4-54 56.6v30.9c0 31.2 24.2 56.6 54 56.6h108c29.8 0 54-25.4 54-56.6v-30.9zM728 980H296c-59.6 0-108-48.4-108-108V224h648v648c0 59.6-48.4 108-108 108z m36-684H260v576c0 19.8 16.2 36 36 36h432c19.8 0 36-16.2 36-36V296zM620 836V404h72v432h-72z m-144 0V404h72v432h-72z m-144 0V404h72v432h-72z m504-504H116v-72h36v-36c0-19.8 16.2-36 36-36h648c19.8 0 36 16.2 36 36v36h36v72h-72z"
                                    fill="#d81e06" p-id="5030"></path>
                            </svg>
                            <span class="text-white font-bold font-serif">删除已读</span>
                        </button>
                    </div>
                    <button @click="collectPrizes(mailDetail.id)" v-if="!isReceiveMail"
                        class="w-28 h-10 absolute right-[10.6rem] cursor-pointer opacity-90 hover:opacity-100 hover:scale-110 transition-all p-[2px] bg-orange-400 backdrop-blur-lg rounded-lg active:scale-95 flex items-center">
                        <svg t="1724316106402" class="icon ml-1 mr-5" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3832" width="25" height="25">
                            <path
                                d="M309.1 318.6c15.6-3.9 25.1-19.7 21.2-35.2-2.9-11.5-4.3-23.4-4.3-35.3 0-80.1 65.2-145.3 145.3-145.3 80.1 0 145.3 65.2 145.3 145.3 0 16.9-2.8 33.3-8.5 49-5.4 15.1 2.4 31.8 17.5 37.2 3.2 1.2 6.6 1.7 9.8 1.7 11.9 0 23.1-7.4 27.4-19.2 7.9-22 11.9-45 11.9-68.6 0-112.2-91.3-203.4-203.4-203.4S267.9 135.9 267.9 248c0 16.7 2 33.3 6 49.3 3.9 15.6 19.6 25 35.2 21.3z"
                                p-id="3833" fill="#1296db"></path>
                            <path
                                d="M777.9 472.3l-197.6-24.7v-156c0-56.1-45.6-101.7-101.7-101.7s-101.7 45.6-101.7 101.7v285.7l-31.3-48.2c-30.6-47-93.7-60.4-140.7-29.8-47 30.6-60.4 93.7-29.9 140.7l187.4 288.3c19.4 29.9 52.2 47.1 87.3 45.8 1.6 0.3 3.3 0.4 4.7 0.4h339c42.7 0 77.5-34.8 77.5-77.5V577.7c0-53.5-40-98.8-93-105.4z m34.9 424.8c0 10.7-8.7 19.4-19.4 19.4H457.1c-2.3-0.4-4.5-0.6-6.6-0.4-15.8 0.8-30.9-6.5-39.3-19.4L223.7 608.4c-13.1-20.1-7.4-47.2 12.8-60.3 20.1-13 47.2-7.4 60.3 12.8l84.7 130.3c7 10.8 20.3 15.5 32.6 12 12.3-3.7 20.8-15 20.8-27.9V291.6c0-24 19.5-43.6 43.6-43.6 24 0 43.6 19.6 43.6 43.6v181.6c0 14.6 10.9 27 25.5 28.8l223 27.9c24.1 3 42.2 23.5 42.2 47.7v319.5z"
                                p-id="3834" fill="#1296db"></path>
                        </svg>
                        <span class="text-white font-bold font-serif">领取</span>
                    </button>
                    <button v-else
                        class="w-28 h-10 absolute right-[10.6rem] cursor-pointer opacity-90 hover:opacity-100 hover:scale-110 transition-all p-[2px] bg-orange-400 backdrop-blur-lg rounded-lg active:scale-95 flex items-center">
                        <svg t="1724317227315" class="icon ml-1 mr-5" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5029" width="23" height="23">
                            <path
                                d="M566 332H458c-69.5 0-126-57.7-126-128.6v-30.9C332 101.7 388.5 44 458 44h108c69.5 0 126 57.7 126 128.6v30.9c0 70.8-56.5 128.5-126 128.5z m54-159.4c0-31.2-24.2-56.6-54-56.6H458c-29.8 0-54 25.4-54 56.6v30.9c0 31.2 24.2 56.6 54 56.6h108c29.8 0 54-25.4 54-56.6v-30.9zM728 980H296c-59.6 0-108-48.4-108-108V224h648v648c0 59.6-48.4 108-108 108z m36-684H260v576c0 19.8 16.2 36 36 36h432c19.8 0 36-16.2 36-36V296zM620 836V404h72v432h-72z m-144 0V404h72v432h-72z m-144 0V404h72v432h-72z m504-504H116v-72h36v-36c0-19.8 16.2-36 36-36h648c19.8 0 36 16.2 36 36v36h36v72h-72z"
                                fill="#d81e06" p-id="5030"></path>
                        </svg>
                        <span class="text-white font-bold font-serif">删除</span>
                    </button>
                </div>
            </div>
            <!-- 奖品弹窗 -->
            <div v-if="showPrizes"
                class="absolute top-0 left-0 w-full h-full bg-black/40 backdrop-blur-sm z-50 rounded-md flex flex-col items-center justify-center">
                <div class="w-[30rem] h-80 rounded-md relative prize flex flex-col justify-end items-center">
                    <!-- 标题 -->
                    <div class="absolute -top-[9.5rem] left-1/2 -translate-x-1/2">
                        <svg t="1726390281444" viewBox="0 0 3350 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="15868" width="300" height="300">
                            <path
                                d="M2788.124444 898.1504s36.260978-11.133156 139.838578 10.023822c148.809956 30.390044 300.879644 113.169067 300.879645 113.169067l-44.043378-288.807822 164.391822-74.308267s-131.925333-118.755556-300.873955-173.084444c-165.449956-53.1968-173.841067-39.941689-173.841067-39.941689l-86.351645 452.949333z"
                                fill="#56B0B6" p-id="15869"></path>
                            <path
                                d="M2879.192178 837.080178s-26.4704-18.693689-57.639822-23.483734c-32.324267-4.960711-66.861511 0-66.861512 0l33.4336 84.553956 91.067734-61.070222z"
                                fill="#075663" p-id="15870"></path>
                            <path
                                d="M563.342222 898.1504s-36.260978-11.133156-139.838578 10.023822c-148.809956 30.390044-300.879644 113.169067-300.879644 113.169067l44.043378-288.807822L2.275556 658.2272s131.925333-118.755556 300.873955-173.084444c165.449956-53.1968 173.841067-39.941689 173.841067-39.941689l86.351644 452.949333z"
                                fill="#56B0B6" p-id="15871"></path>
                            <path
                                d="M472.177778 837.080178s26.4704-18.693689 57.639822-23.483734c32.324267-4.960711 66.861511 0 66.861511 0l-33.4336 84.553956L472.177778 837.080178z"
                                fill="#075663" p-id="15872"></path>
                            <path
                                d="M522.899911 375.506489A10615.921778 10615.921778 0 0 1 1674.0864 312.888889c384.568889 0 769.143467 20.878222 1153.7408 62.634667A56.888889 56.888889 0 0 1 2878.577778 432.082489V836.266667c-403.8656-45.511111-805.882311-68.266667-1206.044445-68.266667-400.162133 0-800.284444 22.755556-1200.355555 68.266667V432.059733a56.888889 56.888889 0 0 1 50.722133-56.553244z"
                                fill="#59BFCE" p-id="15873"></path>
                            <path
                                d="M3043.555556 182.044444s-8.8064 68.209778-39.822223 108.088889c-28.6208 36.795733-79.644444 45.511111-79.644444 45.511111s58.493156-4.084622 85.333333 22.755556c32.369778 32.369778 34.133333 96.711111 34.133334 96.711111s11.537067-59.909689 39.822222-91.022222c28.603733-31.459556 73.955556-34.133333 73.955555-34.133333s-45.562311-14.2848-73.955555-51.2c-28.495644-37.040356-39.822222-96.711111-39.822222-96.711112zM2561.803378 136.533333s-5.586489 44.3392-25.252978 70.257778c-18.147556 23.916089-50.505956 29.582222-50.505956 29.582222s37.091556-2.656711 54.112712 14.791111c20.525511 21.0432 21.646222 62.862222 21.646222 62.862223s7.315911-38.940444 25.258666-59.164445c18.136178-20.445867 46.893511-22.186667 46.893512-22.186666s-28.893867-9.284267-46.8992-33.28C2568.988444 175.320178 2561.803378 136.533333 2561.803378 136.533333zM358.4 0s-8.8064 68.209778-39.822222 108.088889c-28.6208 36.795733-79.644444 45.511111-79.644445 45.511111s58.493156-4.084622 85.333334 22.755556c32.369778 32.369778 34.133333 96.711111 34.133333 96.711111s11.537067-59.909689 39.822222-91.022223c28.603733-31.459556 73.955556-34.133333 73.955556-34.133333s-45.562311-14.2848-73.955556-51.2c-28.495644-37.040356-39.822222-96.711111-39.822222-96.711111zM673.092267 221.866667s-5.586489 44.3392-25.252978 70.257777c-18.147556 23.916089-50.505956 29.582222-50.505956 29.582223s37.091556-2.656711 54.112711 14.791111c20.525511 21.0432 21.646222 62.862222 21.646223 62.862222s7.315911-38.940444 25.258666-59.164444c18.136178-20.445867 46.893511-22.186667 46.893511-22.186667s-28.893867-9.284267-46.8992-33.28C680.277333 260.653511 673.092267 221.866667 673.092267 221.866667z"
                                fill="#FFCA46" p-id="15874"></path>
                        </svg>
                        <span
                            class="text-white absolute top-[8.7rem] left-28 font-black text-lg tracking-widest">恭喜获得</span>
                    </div>
                    <!-- 奖品列表 -->
                    <div :class="mailDetail.prizes.length < 5 ? 'flex justify-center items-center gap-3' : 'grid grid-cols-5 gap-1 place-items-center'"
                        class="w-full h-[85%] rounded-b-md overflow-auto scrollable pb-6 px-5">
                        <div v-for="item in mailDetail.prizes"
                            class="flex relative w-20 h-20 transistion overflow-hidden rounded-lg p-1">
                            <span
                                class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]">
                            </span>
                            <div :class="goodsWorth(item.worth)"
                                class="flex h-full w-full flex-col items-center justify-center rounded-lg pt-1 text-white backdrop-blur-3xl">
                                <img :src="`/api` + item.img" class="w-12 h-12">
                                <span class="text-sm font-mono font-black">X{{ item.num }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="relative group mt-5" @click="showPrizes = false">
                    <div class="relative w-52 h-14 opacity-90 overflow-hidden rounded-md bg-black z-10">
                        <div
                            class="absolute z-10 -translate-x-44 group-hover:translate-x-[30rem] ease-in transistion-all duration-700 h-full w-44 bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12">
                        </div>

                        <div
                            class="absolute flex items-center justify-center text-white z-[1] opacity-85 rounded-md inset-0.5 bg-black">
                            <button name="text"
                                class="font-semibold text-lg h-full w-full px-16 py-3 rounded-md font-mono tracking-widest">
                                收下了
                            </button>
                        </div>
                        <div
                            class="absolute duration-1000 group-hover:animate-spin w-full h-[100px] bg-gradient-to-r from-green-500 to-yellow-500 blur-[30px]">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getmailApi, collectPrizesApi } from "../api"
import type { mailItemType } from "../types"
import { formatter, goodsWorth } from "../hooks"
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const modules = ref([Navigation, Pagination, Scrollbar, A11y])
const emit = defineEmits(['showName'])
const listIndex = ref(0)
const isReceiveMail = ref(false)
const showPrizes = ref(false)
const mailList = ref([] as mailItemType[])
const mailDetail = ref({} as mailItemType)
onMounted(() => {
    getMailList()
})
// 点击左侧邮件列表
const clickMail = (item: mailItemType, index: number) => {
    mailDetail.value = item
    isReceiveMail.value = item.mailStatus === 1
    listIndex.value = index
}
// 获取邮件列表
const getMailList = () => {
    getmailApi().then(res => {
        mailList.value = res
        mailDetail.value = res[listIndex.value]
        isReceiveMail.value = res[0].mailStatus === 1
    })
}
// 领取邮件奖品
const collectPrizes = (id: number) => {
    collectPrizesApi(id).then((res: any) => {
        if (res.code === 200) {
            showPrizes.value = true
            isReceiveMail.value = true
            getMailList()
        }
    })
}
</script>
<style scoped>
.box {
    background: url("../assets/imgs/mail.jpg") no-repeat center center / cover;
}

.prize {
    background: url("../assets/imgs/prizesBg.png") no-repeat center center / cover;
}
</style>
